<style scope lang="scss">
    .icon-svg {
        font-size: 12px !important;
    }
</style>
<template>
    <section>
        <div style="display: flex;align-items:center;">
            <el-input size="small" placeholder="搜索" v-model="queryParams.name"
                      @keyup.enter.native="handleQuery"
            />
            <el-button type="primary" circle size="mini" style="margin-left:5px;" @click="traiggerClassSetting">
                <svgIcon icon-class="settings" class="icon-svg"></svgIcon>
            </el-button>
        </div>
        <div style="margin-top: 10px;">
            <el-tree :data="treeData" style="font-size:20px;"
                     :lazy="true"
                     node-key="id"
                     highlight-current
                     :props="defaultProps"
                     :load="loadMore"
                     @node-click="(data)=>{isClickFirst=false;handleNodeClick(data)}"
            ></el-tree>
        </div>
        
        <el-pagination
                class="paginationTree"
                style="padding-top: 20px;width: 120px;"
                :page-size="queryParams.pageSize"
                :current-page.sync="queryParams.pageNum"
                layout="prev, pager, next"
                size="mini"
                :total="total"
                @size-change="(pageSize)=>{queryParams.pageSize=pageSize;dataList=[];getInfoList();}"
                @current-change="(pageNum)=>{queryParams.pageNum=pageNum;dataList=[];getInfoList();}"
        >
        </el-pagination>
    </section>
</template>
<script >
    import * as classApi from '@/apis/sysclass.api.js'
    import svgIcon from '@codegenarate/svg-icon';
    import mydialogplus from '@codegenarate/mydialogplus'

    export default {
        props: {
            code: {
                type: [String],
                required: true
            },
            immediate: {
                type: [Boolean],
                default() {
                    return true
                }
            }
        },
        components: {
            svgIcon
        },
        data() {
            return {
                total: 0,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    name: ""
                },
                treeData: [],
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    isLeaf: (data) => !data.haveNext,
                }
            }
        },
        mounted() {
         if(this.$props.immediate){
          this.initByDialog({
          
          })
         }
        },
        
        methods: {
          handleQuery() {
            this.queryParams.pageNum = 1;
            this.initByDialog({
    
            })
          },
          
            /**
             * @description:
             * @params _data
             * @return
             */
            initByDialog(_data) {
                this.getInfoList();
            },
            async handleNodeClick(nodeData) {
                this.$emit('nodeClick', nodeData)
            },
            async loadMore(nodedata, resolve) {
                if (nodedata && nodedata.data && nodedata.data.id) {
                    var result = await classApi.getList({
                        "haveNext": true,
                        "parentId": nodedata.data && nodedata.data.id,
                        pageNum: 0, pageSize: 100
                    });
                    resolve(result && result.data || [])

                } else {
                    resolve([])
                }
            },


            async getInfoList() {
                var result = await classApi.getList({
                    "haveNext": true, "parentId": 0,
                    "typeInfo": this.$props.code,
                    ...this.queryParams
                });
                this.treeData = result && result.data || []
            },
            /**
             * @description: 修改分类
             * @params
             * @return
             */
            async traiggerClassSetting() {
                var self = this;
                var result = await mydialogplus({
                    title: "管理分类",
                    width: "800px",
                    data() {
                        return {
                            typeInfo: self.$props.code,
                            code: self.$props.code
                        }
                    },

                    components: {
                        modify: () => import("@/components/classTree/classList.vue")
                    }
                })
            }

        }
    };
</script>
